<template>
  <div v-if="showbill">
    <el-table
      ref="multipleTable"
      :data="waybill"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="waybillNo" label="运单号"> </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="22">
        <div>
          <el-button type="primary" class="button" size="mini" @click="batchUnLockedByPayCommit()">提 交</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { ajax } from "@/store/yg/common/utils";
  import { closeDialog } from "@/utils";

  export default {
    data() {
      return {
        waybill: [],
        multipleSelection: [],
        showbill: false
      };
    },

    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      initPage() {
        const ids = this.$store.state.edit.ids;
        ajax("batchOpenWaybillEdit", ids).then(
          res => {
            console.log(res.data);
            this.waybill = res.data;
            this.showbill = true;
          },
          error => {
            console.log(error);
          }
        );
      },
      batchUnLockedByPayCommit() {
        ajax("batchWaybillOrderUnLockedByPay", this.waybill).then(
          res => {
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              this.openDialogs(res.data);
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      openDialogs(data) {
        const mes = []
        const h = this.$createElement
        for (const i in data) {
          mes.push(h('p', null, data[i]))
        }
        this.$confirm(
          h('div', null, mes),
         '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true,
            type: 'danger',
          }
          ).then(() => {
            closeDialog();
          }).catch(() => {
          });
      },
    },
    mounted() {
      this.initPage();
    }
  };
</script>
<style scoped></style>

<style lang="scss">
  .row-item {
    color: #3f4652;
    line-height: 28px;
    margin-bottom: 14px;
  }
  .button{
    margin-top: 15px;
  }
</style>
